<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--确保适当的绘制与触屏缩放-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="renderer" content="webkit">
{%load staticfiles%}
 <script type="text/javascript" src="../../static/blogs/js/jquery-2.1.4.js"></script>
 <script type="text/javascript" src="../../static/blogs/js/bootstrap.js"></script>
<link href="{%static 'blogs/'%}bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="{%static 'blogs/'%}bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />
<title>无标题文档</title>
<style type="text/css">
	body { padding-top: 10px; }
	
</style>
</head>

<body>
<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header"> <a class="navbar-brand" href="#"> <img alt="LOGO" src=""></a> </div>
    <ul class="nav nav-pills" id="nav-ui-id">
      <li role="presentation" class="active"><a href="#">首&nbsp;&nbsp;页</a></li>
      <li role="presentation"><a href="#">Profile</a></li>
      <li role="presentation" id="about"><a href="#">关&nbsp;&nbsp;于</a></li>
    </ul>
  </div>
</nav>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2 col-sm-3">
      <div class="list-group" id="left-list-group-id"> 
      	<a class="list-group-item active" href="#"><span class="badge">11</span>JAVA</a> 
        <a class="list-group-item disabled" href="#"><span class="badge">0</span>Ruby</a>
        <a class="list-group-item " href="#"><span class="badge">11</span>Python3</a>
        <a class="list-group-item " href="#">JAVAScript<span class="badge">11</span></a>
        <a class="list-group-item disabled" href="#">IDEA<span class="badge">0</span></a> 
        
      </div>
    </div>
    <div class="col-lg-10 col-sm-9">
    	 {%for post in posts%}
        	<div class="col-lg-12">
            <h3><a href="{% url 'blogs:blog_id' %}?blog_id={{post.blogid}}" class="active">
            {{post.title}}
            </a></h3>
            <h6>作者：<a href="#" class="">wangzhihua</a>&nbsp;&nbsp;&nbsp;&nbsp;时间：{{post.timestamp}}</h6>
            	<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                {{post.body}}
                </p>
            </div>
            {%endfor%}
         	 
    </div>
  </div>
</div>

<script src="{%static 'blogs/'%}js/jquery-2.1.4.js"></script>
<script src="{%static 'blogs/'%}js/bootstrap.min.js"></script>
<script type="text/javascript">
 var $tmp =  $("ul#nav-ui-id > li");
 var className = "active";
 	$tmp.click(function() {
  		 	$(this).addClass(className).siblings().removeClass(className);
 });
 
/* 如果有disabled类，这禁用链接，否则为其修改样式并将其他的同类样式删除*/
 $("div#left-list-group-id > a").click(function() {
 		if(false == $(this).hasClass("disabled")){
 				$(this).addClass(className).siblings().removeClass(className);
 		}else{
 			 $(this).removeAttr("href").removeAttr("onclick");
 		}
    	 
    });
</script>
</body>
 
</html>
